<!--
 * @Author: 小花
 * @Date: 2022-01-22 15:28:45
 * @LastEditors: 小花
 * @LastEditTime: 2022-04-18 17:04:00
 * @Description: 图片显示组件，图片加载失败自动显示加载失败样式
-->
<template>
  <div class='el-image_container'>
    <el-image class="image-slot" :src="src" fit="fill">
      <div slot="error">
        <el-image :src="pictureSplit" alt="加载失败" />
      </div>
    </el-image>
  </div>
</template>

<script>
import pictureSplit from '@/assets/images/pictureSplit.webp'
export default {
  props: ['src'],
  data () {
    return {
      pictureSplit
    }
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.el-image_container {
  width: 50%;
  height: auto;
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7c7e81;
  }
}
</style>